<template>
  <div id="box">
    <div class="nav-icons">
      <div class="item">
        <i class="icon font_family icon-tuijian"></i>
        <span>爆料站</span>
      </div>
      <div class="item">
        <i class="icon font_family icon-yingxiong"></i>
        <span>英雄介绍</span>
      </div>
      <div class="item">
        <i class="icon font_family icon-shumogongjuicon-"></i>
        <span>技能优化</span>
      </div>
      <div class="item">
        <i class="icon font_family icon-gushilianzai"></i>
        <span>故障站</span>
      </div>
      <div class="item">
        <i class="icon font_family icon-31quanbushangpin"></i>
        <span>周边商城</span>
      </div>
      <div class="item">
        <i class="icon font_family icon-VRtiyan"></i>
        <span>体验服</span>
      </div>
      <div class="item">
        <i class="icon font_family icon-xinren"></i>
        <span>新人专属</span>
      </div>
      <div class="item">
        <i class="icon font_family icon-jicheng"></i>
        <span>荣耀传承</span>
      </div>
      <div class="item">
        <i class="icon font_family icon-community"></i>
        <span>同人社区</span>
      </div>
      <div class="item">
        <i class="icon font_family icon-wwangzherongyao"></i>
        <span>王者营地</span>
      </div>
      <div class="item">
        <i class="icon font_family icon-gongzhonghao"></i>
        <span>公众号</span>
      </div>
      <div class="item">
        <i class="icon font_family icon-banben"></i>
        <span>版本介绍</span>
      </div>
      <div class="shouqi" @click="shouqi">
        <i class="icon font_family icon-shouqi"></i>
        <span class="text">收起</span>
      </div>
    </div> 
  </div>
</template>

<script>
export default {
  name: 'HomeMenu',
  data() {
    return {

    }
  },
  methods: {
    shouqi() {
      console.log('菜单栏收起');
    }
  }
}
</script>

<style lang="scss" scoped>
  .nav-icons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: #333744;
    padding: 10px 0px 0;
    border-bottom: 1px solid #d4d9de;
  }
  .item {
    width: 25%;
    padding: 5px 0;
    margin-bottom: 10px;
    color: #ccc;
    border-right: 1px solid #d4d9de;
    // border: 1px solid #ccc;
    display: flex;
    text-align: center;
    flex-direction: column; 
  }
  .item:nth-child(4n) {
    border: none;
  }
  .icon {
    font-size: 24px;
    padding-bottom: 7px;
    color: #ccc;
  }
  .shouqi {
    width: 100%;
    padding: 2px 0;
    text-align: center;
    background-color: #f9f9f9;
    .text {
      font-size: 18px;
    }
  }
</style>